<script setup>
import {
  ref, onMounted,
  onBeforeUnmount, computed
} from 'vue'
import { useRoute } from 'vue-router'
import LandingSection from '@/views/Front/Home components/LandingSection.vue'
import MenuDrawer from './components/MenuDrawer.vue'
import Head from './components/HeaderNav.vue'
import HomePageHeader from '@/views/Front/Home components/HomePageHeader.vue'
import HomePageMid from '@/views/Front/Home components/HomePageMid.vue'
import HomePageGallery from '@/views/Front/Home components/HomePageGallery.vue'
import HomePageFooter from '@/views/Front/Home components/HomePageFooter.vue'

const route = useRoute()
// 判断是否显示landing和content sections
const showMainContent = computed(() => {
  return route.path === '/main' || route.name === 'home'
})

</script>
<template>
   <div class="blog-container">
    <Head class="header-nav"/>
    <template v-if="showMainContent">
      <LandingSection/>
        <div class="content-section">
          <HomePageHeader/>
          <HomePageMid/>
          <HomePageGallery/>
          <HomePageFooter/>
        </div>
    </template>
    <RouterView v-else class="router-view"/>
    <MenuDrawer v-model="menu" />
  </div>
</template>
<style scoped>
.blog-container {
  height: auto;
  min-width: 1650px;
  /* 最小宽度为 320px */
  min-height: 840px;
  /* 最小高度为 480px */
  overflow: auto;
  /* 内容溢出时显示滚动条 */
  background-color: #1c1c1c;
}

.content-section {
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: 900px;
  background-color: #1c1c1c;
}

.router-view {
  margin-top: 60px;
  /* height: auto; */
  display: flex;
  min-height: 900px;
  background-color: #1c1c1c;
}
</style>